<template>
  <div class="login">
    <div class="login_left">
      <div class="logo">
        <img src="@/assets/img/login-logo.png" />
      </div>
      <div class="welcome">欢迎登录</div>
      <div class="platform">海囤客二手车出口</div>
      <div class="copyright">
         <div>
          2021 天津盛世恒丰科技有限公司 版权所有 网站备案/许可证号：
          <span class="pointer" @click="handleOpenPage('https://beian.miit.gov.cn/')">
            津ICP备2021007718号-2
          </span>
        </div>
        <div class="gongan">
          <img src="@/assets/img/gongan.png" />
          <div class="ml-sm">
            津公网安备
            <span class="pointer" @click="handleOpenPage('https://beian.mps.gov.cn/#/query/webSearch')"> 12010202000835号 </span>
          </div>
        </div>
      </div>
    </div>
    <div class="login_right">
      <div class="controls" v-if="type === 0">
        <div class="title">用户登录</div>
        <c-login-form />
        <div class="controls-bottom">
          <span>未有账号,</span>
          <span class="c-blue f-s-14 pointer" @click="handleRegisterGo">去注册</span>
        </div>
      </div>
      <div class="controls" v-else-if="type === 1">
        <div class="title">用户注册</div>
        <c-register-form @change="handleLoginGo"/>
        <div class="controls-bottom">
          <span>已有账号,</span>
          <span class="c-blue f-s-14 pointer" @click="handleLoginGo">去登录</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import cLoginForm from "./components/LoginForm.vue";
import cRegisterForm from "./components/RegisterForm.vue";
import { useLoginHook } from "@/hooks/useSendVerificationCode.js";
const { setCountDown } = useLoginHook();
import { onMounted, ref } from "vue";
onMounted(()=>{
  setCountDown(0);
})
const type = ref(0);
const handleOpenPage=(url) => {
  window.open(url)
};
const handleRegisterGo = () => {
  setCountDown(0);
  type.value = 1;
};
const handleLoginGo = () => {
  setCountDown(0);
  type.value = 0;
};
</script>
<style lang="less" scoped>
.login {
  display: flex;
  align-items: center;
  height: 100vh;
  width: 100vw;
  background-color: #051e36;
  background: url("@/assets/img/login-bg.png") no-repeat;
  background-size: 100% 100%;
  .login_left {
    width: 35.9375vw;
    height: 100%;
    background: rgba(71, 131, 210, 0.87);
    display: flex;
    flex-direction: column;
    align-items: center;
    .logo {
      margin-top: 155px;
      width: 220px;
      height: 82px;
    }
    .welcome {
      font-weight: 400;
      font-size: 52px;
      font-weight: 400;
      color: #0e2f4e;
      margin-top: 95px;
    }
    .platform {
      margin-top: 30px;
      font-size: 52px;
      font-weight: 500;
      color: #ffffff;
    }
    .copyright {
      font-size: 12px;
      color: #efefef;
      position: absolute;
      bottom: 0;
      left: auto;
      right: auto;
      margin-bottom: 50px;
      .gongan {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 12px;
        & > img {
          width: 16px;
          height: 16px;
        }
      }
    }
  }
  .login_right {
    width: calc(100vw - 35.9375vw);
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    .controls {
      width: 546px;
      height: 657px;
      background: #ffffff;
      box-shadow: 0px 9px 28px 8px rgba(0, 0, 0, 0.05),
        0px 6px 16px 0px rgba(0, 0, 0, 0.08),
        0px 3px 6px -4px rgba(0, 0, 0, 0.12);
      position: relative;
      .controls-bottom {
        margin: 0 70px;
        position: absolute;
        bottom: 40px;
        font-size: 14px;
        font-weight: 400;
        left: 0;
        right: 0;
      }
      .title {
        font-size: 24px;
        font-weight: 500;
        color: #092036;
        text-align: center;
        margin-top: 50px;
      }
    }
  }
}
</style>